<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美食管理</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.js" ></script>
    <script type="text/javascript" src="/js/vue.js" ></script>
    <!-- 引入样式 -->
    <link type="text/css" rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="/element-ui/lib/index.js"></script>
    <style >
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
        .camp_img{
            width: 200px;
            margin-right: 20px;
        }
        .search{
            width: 200px;
        }
        .header{
            width: 100%;
            height: 50px;
            margin: 0 auto;
            text-align: center;
            margin-bottom: 40px;
        }
        .fenye{
            width: 500px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
        }

    </style>
</head>
<body>
    <div id="div">
        <div class="header">
        <!--新增信息的按钮-->
        <el-button type="success" @click="addDialogVisible = true">新增美食信息</el-button>
        <!--  搜索的输入框      -->
            请输入美食名： <el-input class="search" placeholder="请输入美食名："  clearable suffix-icon="el-icon-search" v-model="foodName"></el-input>
        <!--  搜索的输入框      -->
            请输入营地地址名: <el-input class="search" placeholder="请输入营地地址名："  clearable suffix-icon="el-icon-search" v-model="address"></el-input>
        <br>
        <!--  搜索的输入框      -->
        请输入菜品的最大价格: <el-input class="search" placeholder="请输入菜品的最大价格："  clearable suffix-icon="el-icon-search" v-model="maxPrice"></el-input>
        <!--  搜索的输入框      -->
        请输入菜品的最小价格: <el-input class="search" placeholder="请输入菜品的最小价格："  clearable suffix-icon="el-icon-search" v-model="minPrice"></el-input>
        <!--  查询的按钮    -->
        <el-button type="primary" @click="selectFood()">查询</el-button>
        </div>
        <!--新增camp模态框-->
        <el-dialog
                title="提示"
                :visible.sync="addDialogVisible"
                width="30%"
                :before-close="handleClose">
            <span>美食名:</span><el-input v-model="Food.foodName" placeholder="请输入内容"></el-input>
            <span>美食价格:</span><el-input v-model="Food.price" placeholder="请输入内容"></el-input><br>
            <span>美食库存:</span><el-input v-model="Food.stock" placeholder="请输入内容"></el-input><br>
            <span>联系电话:</span><el-input v-model="Food.tel" placeholder="请输入内容"></el-input>

            <span>选择城市:</span><br>
            <el-select v-model="Food.cityName" placeholder="请选择">
                <el-option
                        v-for="city in citys"
                        :key="city.cityId"
                        :label="city.cityName"
                        :value="city.cityId">
                </el-option>
            </el-select><br>
            <span>选择城市所在营地:</span><br>
            <el-select v-model="Food.campId" placeholder="请选择">
                <el-option  class="campId"
                        v-for="camp in camps"
                        :key="camp.campId"
                        :label="camp.campname"
                        :value="camp.campId">
                </el-option>
            </el-select><br>



<!--            <span>所在营地:</span><el-input v-model="Food.campName" placeholder="请输入内容"></el-input>-->
             <br> 开始营业时间：<br>
<!--            <el-input v-model="Food.startTime" placeholder="请输入内容"></el-input><br>-->
            <br>
            <el-time-picker
                    v-model="Food.startTime"
                    :picker-options="{
                 selectableRange: '06:30:00 - 23:30:00'
                 }"
                    placeholder="任意时间点">
            </el-time-picker><br>
            结束营业时间：<br>
<!--            <el-input v-model="Food.endTime" placeholder="请输入内容"></el-input>-->

            <el-time-picker
                    arrow-control
                    v-model="Food.endTime"
                    :picker-options="{
                 selectableRange: '18:30:00 - 20:30:00'
                  }"
                    placeholder="任意时间点">
            </el-time-picker><br>
            <span>美食介绍:</span><el-input  type="textarea"  autosize v-model="Food.describe" placeholder="请输入内容"></el-input>
            <!--上传图片-->
            <el-upload
                    class="upload-demo"
                    action="/uploadFoodImgs"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :on-success="successUpload"
                    :before-upload="setUploadBytes"
                    list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过3M</div>
            </el-upload>
            <!--上传图片结束-->
            <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addFood()">确 定</el-button>
            </span>
        </el-dialog>
        <!--更新模态框-->
        <el-dialog
                title="更新美食信息"
                :visible.sync="updateDialogVisible"
                width="50%"
                :before-close="handleClose">
            <span>美食名:</span><el-input v-model="updateFoodInfo.foodName" placeholder="请输入内容"></el-input>
            <span>美食价格:</span><el-input v-model="updateFoodInfo.price" placeholder="请输入内容"></el-input><br>
            <span>美食库存:</span><el-input v-model="updateFoodInfo.stock" placeholder="请输入内容"></el-input><br>
            <span>联系电话:</span><el-input v-model="updateFoodInfo.tel" placeholder="请输入内容"></el-input>

            <span>所在城市:</span>
            <el-select v-model="updateFoodInfo.cityName" placeholder="请选择">
                <el-option
                        v-for="city in citys"
                        :key="city.cityId"
                        :label="city.cityName"
                        :value="city.cityId">
                </el-option>
            </el-select><br>

            <span>所在营地:</span><el-input v-model="updateFoodInfo.campName" placeholder="请输入内容"></el-input>
            <span>营业时间: </span> <br> 开始时间：<el-input v-model="updateFoodInfo.startTime" placeholder="请输入内容"></el-input><br>开始时间：<el-input v-model="updateFoodInfo.endTime" placeholder="请输入内容"></el-input>
            <span>美食介绍:</span><el-input  type="textarea"  autosize v-model="updateFoodInfo.describe" placeholder="请输入内容"></el-input>
<!--            <span>图片:</span><br><img :src="updateFoodInfo.url" alt="">-->
<!--            <span slot="footer" class="dialog-footer">-->
            <el-button @click="updateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateFood()">确 定</el-button>
            </span>
        </el-dialog>
        <!--删除模态框-->
        <el-dialog
                title="移除美食信息"
                :visible.sync="deleteDialogVisible"
                width="30%"
                :before-close="handleClose">
<!--            <span>营地名:</span><el-input v-model="deleteFoodInfo.foodName" placeholder="请输入内容"></el-input>-->
<!--            <span>电话:</span><el-input  v-model="deleteFoodInfo.tel" placeholder="请输入内容"></el-input><br>-->
<!--            <span>地址:</span><el-input  v-model="deleteFoodInfo.address" placeholder="请输入内容"></el-input>-->
<!--            <span>营地介绍:</span><el-input  type="textarea"  autosize  v-model="deleteFoodInfo.introduce" placeholder="请输入内容"></el-input>-->
<!--            <span>图片:</span><br><img :src="deleteFoodInfo.url" alt="">-->




            <span>美食名:</span><el-input v-model="deleteFoodInfo.foodName" placeholder="请输入内容"></el-input>
            <span>美食价格:</span><el-input v-model="deleteFoodInfo.price" placeholder="请输入内容"></el-input><br>
            <span>美食库存:</span><el-input v-model="deleteFoodInfo.stock" placeholder="请输入内容"></el-input><br>
            <span>联系电话:</span><el-input v-model="deleteFoodInfo.tel" placeholder="请输入内容"></el-input>

            <span>所在城市:</span>
            <el-select v-model="deleteFoodInfo.cityName" placeholder="请选择">
                <el-option
                        v-for="city in citys"
                        :key="city.cityId"
                        :label="city.cityName"
                        :value="city.cityId">
                </el-option>
            </el-select><br>

            <span>所在营地:</span><el-input v-model="deleteFoodInfo.campName" placeholder="请输入内容"></el-input>
            <span>营业时间: </span> <br> 开始时间：<el-input v-model="deleteFoodInfo.startTime" placeholder="请输入内容"></el-input><br>开始时间：<el-input v-model="deleteFoodInfo.endTime" placeholder="请输入内容"></el-input>
            <span>美食介绍:</span><el-input  type="textarea"  autosize v-model="deleteFoodInfo.describe" placeholder="请输入内容"></el-input>
            <!--            <span>图片:</span><br><img :src="updateFoodInfo.url" alt="">-->
            <!--            <span slot="footer" class="dialog-footer">-->

            <span slot="footer" class="dialog-footer">
            <el-button @click="deleteDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteFood()">确认删除</el-button>
            </span>
        </el-dialog>


        <!-- 展示信息的表格 -->
        <template>
            <el-table :data="tableData" >
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <img class="camp_img" :src="props.row.url" />
                            <el-form-item label="营地介绍">
                                <span>{{ props.row.describe }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>

                <el-table-column label="美食 ID" prop="foodId">
                </el-table-column>
                <el-table-column label="美食名称" prop="foodName">
                </el-table-column>
                <el-table-column label="价格" prop="price">
                </el-table-column>
                <el-table-column label="库存" prop="stock">
                </el-table-column>
                <el-table-column label="描述" prop="describe"  :show-overflow-tooltip="true" >
                </el-table-column>
                <el-table-column label="城市名称" prop="cityName">
                </el-table-column>
                <el-table-column label="营地名称" prop="campName"   :show-overflow-tooltip="true" >
                </el-table-column>
                <el-table-column label="开始营业时间"  prop="startTime"  format="HH:mm:ss"   :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="结束营业时间"  prop="endTime"  format="HH:mm:ss"   :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="编辑">
                    <template scope="scope">
                        <el-button type="primary" size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="删除">
                    <template scope="scope">
                        <el-button type="danger" size="mini" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                </el-scrollbar>
            </el-table>
            <div class="fenye">
            <!--分页的脚步-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageIndex"
                    :page-sizes="[2, 4, 6, 8]"
                    :page-size="page.number"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.dataCount">
            </el-pagination>
            </div>
        </template>

    </div>
    <script type="text/javascript">
        new Vue({
            el:"#div",
            data:{
                foodName:'',
                address:'',
                maxPrice:10000,
                minPrice:0,
                //定义集合存储营地信息
                tableData:[],
                page: {
                    pageIndex:1,
                    number:2,
                    pageCount:null,
                    dataCount:null
                },
                //新增camp模态框默认关闭
                updateDialogVisible:false,
                addDialogVisible:false,
                deleteDialogVisible:false,

                //定义一个对象接收将要更新的信息
                updateFoodInfo: {
                    foodId:0,
                    foodName:'',
                    price:0,
                    stock:0,
                    describe:'',
                    tel:'',
                    address:'',
                    cityName:'',
                    campName:'',
                    startTime:'',
                    endTime:'',
                    url:''
                },
                //记录要删除营地的信息
                deleteFoodInfo:{
                    foodId:0,
                    foodName:'',
                    price:0,
                    stock:0,
                    describe:'',
                    tel:'',
                    address:'',
                    cityName:'',
                    campName:'',
                    startTime:'',
                    endTime:'',
                    url:''
                },
                Food: {
                    foodId:0,
                    foodName:'',
                    price:0,
                    stock:0,
                    describe:'',
                    tel:'',
                    address:'',
                    cityName:'',
                    campName:'',
                    startTime:'',
                    endTime:'',
                    url:'',
                    campId:0
                },
                //图片集合
                fileList:[],
                citys:'',
                camps:''
            },
            created:function () {
               this.selectFood();
                this.selectCity();
            },
            methods:{

                //查询所有城市信息
                selectCity(){
                    var _this = this;
                    $.ajax({
                        url: "/camp/selectAllCity",
                        type: "get",
                        dataType: "json",
                        success: function(data) {
                            _this.citys = data.list;
                        },
                        error: function(data) {
                            alert(data.responseJSON.message);
                        }
                    });
                },
                //查询营地信息
                selectFood(){
                    var _this = this;
                    $.ajax({
                        url: "/selectFoodExample",
                        type: "get",
                        data: {
                            "index":_this.page.pageIndex,
                            "number":_this.page.number,
                            "foodName":_this.foodName,
                            "address":_this.address,
                            "maxPrice":_this.maxPrice,
                            "minPrice":_this.minPrice
                        },
                        dataType: "json",
                        success: function(data) {

                            _this.tableData=data.list,
                                console.log(data.list),
                            _this.page.pageIndex = data.obj.pageIndex;
                            _this.page.number = data.obj.number;
                            _this.page.pageCount = data.obj.pageCount;
                            _this.page.dataCount = data.obj.count;
                        },
                        error: function(data) {
                            alert(data.responseJSON.message);
                        }
                    });
                },

                //更新美食信息
                updateFood(){
                    var _this = this;
                    $.ajax({
                        url: "/updateFood",
                        type: "get",
                        data: _this.updateFoodInfo,
                        dataType: "json",
                        success: function(data) {
                            // alert("信息已更新")
                            _this.open1();
                            _this.selectFood();
                            _this.updateDialogVisible=false;
                        },
                        error: function(data) {
                            _this.open2();
                            alert(data.responseJSON.message);
                        }
                    });
                },
                //删除美食信息
                deleteFood(){
                    var _this = this;
                    $.ajax({
                        url: "/deleteFood",
                        type: "get",
                        data: {"foodId":_this.deleteFoodInfo.foodId},
                        dataType: "json",
                        success: function(data) {
                            _this.open1();
                            _this.page.pageIndex = 1;
                            _this.selectFood();
                            _this.deleteDialogVisible=false;
                        },
                        error: function(data) {
                            _this.open2();
                            alert(data.responseJSON.message);
                        }
                    });
                },

                handleEdit:function(index, row) {
                    console.log(index, row);
                    this.updateFoodInfo = row;
                    this.updateDialogVisible = true;
                },
                handleDelete:function(index, row) {
                    this.deleteDialogVisible=true;
                    this.deleteFoodInfo = row;
                    console.log(this.deleteFoodInfo)
                    this.deleteFood(row.foodId)
                },
                //分页
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.page.number = val;
                    this.selectFood();
                },
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.page.pageIndex = val;
                    this.selectFood();
                },
                //模态框确认
                handleClose(done) {
                    this.$confirm('确认关闭？')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {});
                },
                //操作成功提示
                open1() {
                    this.$notify({
                        title: '成功',
                        message: '操作成功',
                        type: 'success'
                    });
                },
                open2() {
                    this.$notify.error({
                        title: '错误',
                        message: '操作失败'
                    });
                },

                //添加商品提交
                addFood(){
                    //判断数据
                    if(this.Food.foodName.length<1){
                        this.$message({
                            type: 'info',
                            message: '请填写名称'
                        });
                        return;
                    }
                    if(this.isNumber(this.Food.price)==false || this.Food.price==null ){
                        this.$message({
                            type: 'info',
                            message: '请填写有效价格'
                        });
                        return;
                    }
                    if(this.isNumber(this.Food.stock)==false || this.Food.stock==null ){
                        this.$message({
                            type: 'info',
                            message: '请填写有效库存'
                        });
                        return;
                    }
                    if(this.Food.describe.length<1){
                        this.$message({
                            type: 'info',
                            message: '请填写描述'
                        });
                        return;
                    }
                    //添加food数据库
                    var _this=this;
                    var imgs=[];
                    for(var i=0;i<this.fileList.length;i++){
                        imgs.push(this.fileList[i].response);
                    }
                    if(imgs.length==0){
                        this.$message({
                            type: 'info',
                            message: '请上传图片'
                        });
                        return;
                    }
                    //定义主键
                    var foodId=0;


                    $.ajax({
                        url:'/addFood',
                        type:'post',
                        data:{
                            foodName:_this.Food.foodName,
                            price:_this.Food.price,
                            tel:_this.Food.tel,
                            stock:_this.Food.stock,
                            describe:_this.Food.describe,
                            campId:_this.Food.campId,
                            address:_this.Food.address,
                            startTime:_this.Food.startTime,
                            endTime:_this.Food.endTime,
                        },
                        async:false,
                        dataType:'json',
                        success:function(data){
                            foodId=data.obj;
                        }
                    })
                    //添加图片到数据库
                    if(imgs.length>0){
                        for(var i=0;i<imgs.length;i++){
                            $.ajax({
                                url:'/addFoodImg',
                                type:'post',
                                data:{
                                    foodId:foodId,
                                    url:imgs[i]
                                },
                                async:false,
                                dataType:'json'
                            })
                        }
                    }
                    //清空添加商品的绑定,以下次添加商品页面上为空
                    this.Food.foodName='';
                    this.Food.price=null;
                    this.Food.stock=null;
                    this.Food.describe=null;
                    this.fileList=[];
                    this.Food.status=null;
                    this.$message({
                        type: 'info',
                        message: '添加成功'
                    });
                    //关闭窗口
                    this.dialogVisible=false;
                },
                //添加商品时删除图片
                handleRemove(file, fileList) {
                    this.fileList=fileList;
                    console.log(this.fileList);
                },
                //设置图片上传大小
                setUploadBytes(file){
                    const isJPG = file.type === 'image/jpeg';
                    const isPNG = file.type === 'image/png';
                    const isLt2M = file.size / 1024/1024  < 3;

                    if (!isJPG &&  !isPNG) {
                        this.$message.error('上传图片必须是JPG/PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传图片大小不能超过3M!');
                    }
                    return (isJPG || isPNG) && isLt2M;
                },
                //添加商品时添加图片成功后的
                successUpload(response,file,fileList){
                    //参数fileList为当前已将上传的图片的参数集合
                    this.fileList=fileList;
                    console.log(this.fileList);
                },
                //判断是否是数字
                isNumber(value) {         //验证是否为数字
                    var patrn = /^(-)?\d+(\.\d+)?$/;
                    if (patrn.exec(value) == null || value == "") {
                        return false
                    } else {
                        return true
                    }
                },

            },
            watch:{
                    'Food.cityName':function(){
                        console.log(this.Food.cityName);
                        var _this = this;
                        $.ajax({
                            url: "/selectCampByCityName",
                            type: "get",
                            data:{cityId:this.Food.cityName},
                            dataType: "json",
                            success: function(data) {
                                _this.camps = data.list;
                            },
                            error: function(data) {
                                alert(data.responseJSON.message);
                            }
                        });
                    },
            }
        })
    </script>
</body>
</html>